<template>
    <view class="pg">
        <wd-cell-group border>
            <wd-cell title="机器码" :border="false" size="large" title-width="140rpx">
                <template>
                    <view class="w-200 flex">
                        <wd-text :text="machineInfo.machineCode" color="#666" size="16px"></wd-text>
                    </view>
                </template>
            </wd-cell>
            <wd-cell title="主板码" size="large" title-width="140rpx">
                <template>
                    <view class="w-200 flex">
                        <wd-text :text="machineInfo.boardCode" color="#666" size="16px"></wd-text>
                    </view>
                </template>
            </wd-cell>
            <wd-cell title="场地" size="large" title-width="140rpx">
                <template>
                    <view class="w-200 flex">
                        <wd-text :text="machineInfo.region ? machineInfo.region.name : '加载中'" color="#666" size="16px"></wd-text>
                    </view>
                </template>
            </wd-cell>
            <wd-cell title="设备模板" size="large" title-width="140rpx">
                <template>
                    <view class="w-200 flex">
                        <wd-text :text="machineInfo.machineOption ? machineInfo.machineOption.name : '加载中'" color="#666" size="16px"></wd-text>
                    </view>
                </template>
            </wd-cell>
            <wd-cell title="在线状态" size="large" title-width="140rpx">
                <template>
                    <view class="w-200 flex">
                        <wd-text :text="machineInfo.isOnline ? '在线' : '离线'" :color="machineInfo.isOnline ? '#10b981' : '#dc2626'" size="16px"></wd-text>
                    </view>
                </template>
            </wd-cell>
            <wd-cell title="下位机状态" size="large" title-width="140rpx">
                <template>
                    <view class="w-200 flex">
                        <wd-text :text="machineInfo.lcStatus ? '正常' : '异常'" :color="machineInfo.lcStatus ? '#10b981' : '#dc2626'" size="16px"></wd-text>
                    </view>
                </template>
            </wd-cell>
            <wd-cell title="激活状态" size="large" title-width="140rpx">
                <template>
                    <view class="w-200 flex">
                        <wd-text :text="machineInfo.isAct ? '已激活' : '未激活'" :color="machineInfo.isAct ? '#10b981' : '#dc2626'" size="16px"></wd-text>
                    </view>
                </template>
            </wd-cell>
            <wd-cell title="创建时间" size="large" title-width="140rpx">
                <template>
                    <view class="w-400 flex">
                        <wd-text :text="machineInfo.createTime" color="#666" size="16px"></wd-text>
                    </view>
                </template>
            </wd-cell>
        </wd-cell-group>
        <title-block title="设备商品"></title-block>
        <wd-cell-group border>
            <template v-for="(item, index) in 5">
                <wd-cell :title="index + 1 != 5 ? `${index + 1}号货道` : `${index + 1}号货道（纸巾）`" title-width="140rpx" :border="false" size="large" center>
                    <template>
                        <view class="w-200 flex gap-16">
                            <wd-button plain @click="replenish(index + 1)">补货</wd-button>
                            <wd-button plain type="warning" @click="open(index + 1)">开柜</wd-button>
                        </view>
                    </template>
                </wd-cell>
            </template>
        </wd-cell-group>
    </view>
</template>

<script setup>
    import { onLoad } from '@dcloudio/uni-app';
    import { api_machine_getDtoFull, api_machin_replenish, api_machin_openCabinet } from '@/api/machine.js';
    import { callWithAsyncErrorHandling, ref } from 'vue';

    const machineInfo = ref({});
    const position = [1, 2, 3, 4, 5];

    onLoad(async (opt) => {
        // console.log(opt);
        try {
            let res = await api_machine_getDtoFull({ sn: opt.sn });
            console.log(res);
            machineInfo.value = res.data;
        } catch (error) {
            uni.showToast({
                title: error.msg,
                icon: 'none'
            });
        }
    });

    //点击补货
    const replenish = async (index) => {
        console.log(index);
        try {
            await api_machin_replenish({
                id: machineInfo.value.id,
                position: index + 1
            });
            uni.showToast({
                title: '补货成功',
                icon: 'success'
            });
        } catch (error) {
            uni.showToast({
                title: error.msg,
                icon: 'none'
            });
        }
    };

    //点击开柜
    const open = async (index) => {
        try {
            await api_machin_openCabinet({
                id: machineInfo.value.id,
                position: index + 1
            });
        } catch (error) {
            uni.showToast({
                title: error.msg,
                icon: 'none'
            });
        }
    };
</script>

<style lang="scss" scoped></style>
